var TabMenu = Backbone.View.extend({
	tagName: "li",
	initialize: function() {
		this.render();
		this.model.on("change:item", this.update, this);

	},
	renderFlipButton: function() {
		var t = this;
		this.ctrlBtn =
		// $('.switch', this.$el).each(function() {
		new FlipButton({
			el: $('.switch', this.$el)
		}).register(t);
		// });
	},
	render: function() {
		var html = $("#tabmenu_template").html();
		this.model.view = this;
		this.blockName = this.options.block.model.get('title');
		var t = this;
		this.home = this.$el.parent().children().first();
		//the title has value
		if (this.model.get('item').val.trim().length > 0) {
			this.body = $(html);
			this.$el.html(this.body);

			this.renderFlipButton();
			this.update();

			$('.close', this.$el).click(

			function() {
				$(this).trigger('restore');
				t.model.collection.remove(t.model);
			});

			var block = this.options.block;
			this.$el.click(function() {
				if ($(this).hasClass("active")) return;
				else {

					if (block.zoomView) {
						block.zoom();
						block.toggle(block.zoomView);
					}

					$(".active", $(this).parent()).removeClass('active');
					$(this).addClass('active');
					$(this).closest('div.panel-tab').children('.triangle').animate({
						'left': ($(this).position().left + 8) + 'px'
					});

					t.updateContent();
					//show(tab)
				}
			});

			this.$el.on({
				"user": function() {
					t.updateSubMenu(t);
				}
			});
			Auth.ctrl.push(this.$el);
		}
		// else this.$el.html(this.options.empty);
	},
	updateContent: function() {
		if (this.model.get('sub')) {
			this.options.block.model.set('sub', this.model.get('sub'));
		}
		if (this.model.get('data')) {
			var module = this.model.get('subName');
			var g = PT.groupArray[module];
			if (g.flag) {
				g.obj.activate(this.ctrlBtn.status == 1);
				g.obj.setValue(this.model.get('data'));
				g.wraper.children().hide();
				g.obj.$el.show();
			}

		}
	},
	update: function() {
		if (!this.model.get('item')) {
			$("li.type", this.body).next().remove();
			$("li.type", this.body).remove();
			return;
		}

		$("span", this.body).text(this.model.get('item').val);
		this.updateSubMenu(this);
	},
	updateSubMenu: function(view) {

		var showSub = false;
		if (!ViewData.Login[view.blockName]) {
			if (view.ctrlBtn.status == 0) {
				view.ctrlBtn.toggle();
			}
			$('.l0', view.body).not('.l1').hide();
		} else {
			showSub = true;
			$('.l0', view.body).not('.l1').show();
		}
		if (view.model.get('item').type && view.model.get('item').type.trim().length > 0) {
			showSub = true;
			$("li.type", view.body).text(view.model.get('item').type);
		} else {
			$("li.type", view.body).next().hide();
		}


		if (showSub) {
			view.body.last().css({
				visibility: 'visible'
			}); // => "ul.dropdown-menu"
			$("b.caret", view.body).css('display', 'inline-block');
		} else {
			view.body.last().css({
				visibility: 'hidden'
			}); // => "ul.dropdown-menu"
			$("b.caret", view.body).hide();
		}
	},
	toggleEdit: function(obj, status) {
		$('.l1', obj.el).slideToggle();
		var icon = $('a i', obj.el)
		icon.attr('class', '').addClass(icon.attr('c' + status));
		var module = obj.model.get('subName');
		var g = PT.groupArray[module];
		if (g.obj) g.obj.activate(status == 1);
	}

});

var TabMenus = Backbone.View.extend({
	initialize: function() {
		// this.render();
		this.collection.on("add", this.add, this);
		this.collection.on("remove", this.remove, this);
	},
	items: {},
	add: function(model) {
		var tm = new TabMenu({
			model: model,
			block: this.options.block
		});
		// this.items[model.get('item').val+'\n'+model.get('item').type] = tm;
		this.$el.append(tm.$el);
	},
	remove: function(model) {
		// var name = model.get('item').val+'\n'+model.get('item').type;
		// if(this.items[name])
		// this.items[name].remove();
		model.view.remove()
		model.clear();
	}

});